.container {
    main {
        display: flex;
        width: 15.2rem;
        margin-left: 3rem;
        .left {
            background-color: rgba(0, 0, 0, 0.2);
            width: 20%;
            text-align: center;
            border-radius: .12rem;

            .head {
                margin-top: .2rem;

                img {
                    border-radius: 50%;
                    width: 1.2rem;
                    height: 1.2rem;
                }
            }

            .list {
                padding: 0;
                margin-top: .5rem;
                color: white;
                font-size: .18rem;

                li {
                    cursor: pointer;
                    line-height: .5rem;
                    height: .5rem;
                    transition: all 0.3s;
                }

                li:hover {
                    background-color: rgba(0, 0, 0, 0.4);
                }
            }
        }

        .right {
            width: 76%;
            height: 60%;
            margin: .5rem auto;

            >div {
                transition: all 0.8s;
            }

            >div::after {
                content: "";
                display: block;
                border: solid .01rem;
                width: 0;
                height: 0;
                opacity: 0.6;
                border-right: .2rem solid;
                border-left: .2rem solid transparent;
                border-top: .2rem solid transparent;
                border-bottom: .2rem solid transparent;
                position: absolute;
                left: -0.42rem;
                top: 50%;
                margin-top: -.2rem;
            }

            // 资料
            .information {
                position: relative;
                display: none;
                border-radius: .2rem;
                border: dashed .02rem gray;
                height: 110%;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.8);

                h4 {
                    text-indent: 2em;
                    height: 1rem;
                    line-height: 1rem;
                    font-weight: bold;
                }

                table {
                    width: 80%;

                    tr {
                        td {
                            line-height: .6rem;
                            height: .6rem;
                        }

                        td:nth-child(odd) {
                            width: 12%;
                            text-align: right;
                        }

                        td:nth-child(1) {
                            width: 8%;
                        }

                        td:nth-child(even) {
                            text-indent: 1em;
                        }
                    }
                }
            }

            //技能
            .skill {
                position: relative;
                left: 100%;
                display: none;
                border-radius: .2rem;
                border: dashed .02rem gray;
                height: 5.6rem;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.8);

                h4 {
                    text-indent: 2em;
                    height: .8rem;
                    line-height: .8rem;
                    font-weight: bold;
                }

                .skills {
                    padding: 0;
                    // border: solid 1px;
                    width: 94%;
                    margin: .1rem auto;
                    text-align: center;
                    height: 4.4rem;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;

                    li {
                        width: 30%;
                        height: 2.2rem;

                        // border: solid 1px;
                        .icon {
                            position: relative;
                            width: 1rem;
                            height: 1rem;
                            line-height: 1rem;
                            border-radius: 50%;
                            margin: .1rem auto;
                            color: white;
                            background-color: white;
                            box-shadow: 0rem .05rem 0 gray;

                            img {
                                // border: 1px solid;
                                width: .6rem;
                                height: .6rem;
                            }
                        }

                        .skillname {
                            font-size: .18rem;
                            font-weight: bold;
                            margin-bottom: .12rem;
                        }
                    }
                }
            }

            //评价
            .evaluate {
                position: relative;
                left: 100%;
                display: none;
                border-radius: .2rem;
                border: dashed .02rem gray;
                height: 90%;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.8);

                h4 {
                    text-indent: 2em;
                    height: 1rem;
                    line-height: 1rem;
                    font-weight: bold;
                }

                ul {
                    li {
                        background-color: rgba(124, 124, 124, 0.4);
                        border-radius: .3rem;
                        position: relative;
                        border-bottom: .02rem dashed aqua;
                        height: .6rem;
                        width: 90%;
                        line-height: .6rem;
                        font-size: .18rem;
                        text-indent: 1em;
                        margin: .1rem .4rem;
                    }

                    li::after {
                        content: "";
                        display: block;
                        border: solid .01rem;
                        width: .08rem;
                        height: .08rem;
                        position: absolute;
                        left: -0.2rem;
                        top: 50%;
                        margin-top: -0.04rem;
                        border-radius: 50%;
                    }
                }
            }

            // 选中状态
            .current {
                display: block;
                left: 0;
            }
        }
    }
}